import {  View, Text, Pressable, StyleSheet } from 'react-native';
import { px2dp } from '../../../utils/pixel-adapter';


const actions = [
    {
        label: '每日推荐',
        icon: '\ue600',
    },
    {
        label: '私人漫游',
        icon: '\ue600',
    },
    {
        label: '排行榜',
        icon: '\ue600',
    },
    {
        label: '数字专辑',
        icon: '\ue600',
    },
    {
        label: '直播',
        icon: '\ue600',
    },
];

export function Actions() {
    return (
        <View style={styles.continer}>
            {
                actions.map((item, index) => (
                    <Pressable key={index} style={({ pressed }) => {
                        return [styles.actionItemBox, pressed && styles.actionItemBoxPressed];
                    }}>
                        <View style={styles.iconBox}>
                            <Text style={[styles.whiteColor, { fontFamily: 'iconfont' }]}>{item.icon}</Text>
                        </View>
                        <Text style={[styles.whiteColor, styles.bottomText]}>{item.label}</Text>
                    </Pressable>
                ))
            }
        </View>
    );
}


const styles = StyleSheet.create(
    {
        continer: {
            flexDirection: 'row',
            justifyContent: 'space-between',
        },
        actionItemBox: {
            width: px2dp(52),
            marginTop: 20,
            paddingTop: 10,
            paddingBottom: 10,
            paddingLeft: 0,
            paddingRight: 0,
            alignItems: 'center',
            borderRadius: px2dp(6),
        },
        actionItemBoxPressed: {
            backgroundColor: '#ccc',
        },
        iconBox: {
            width: px2dp(48),
            height: px2dp(48),
            backgroundColor: 'rgba(39, 39, 39, 0.8)',
            borderRadius: px2dp(48),
            justifyContent: 'center',
            alignItems: 'center',
        },
        bottomText: {
            fontSize: px2dp(12),
            marginTop: px2dp(8),
        },
        whiteColor: {
            color: 'white',
        },
    }
);